<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery.js"></script>
</head>
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: 'f201861d565e62bf627ac7bc797fbb10',
    }
</script>
<script type="text/javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=d70cc4ab1718d09ff105699312120a22&plugin=AMap.ToolBar,AMap.Driving"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #container {
        width: 500px;
        height: 500px;
        margin: auto;
    }

    #main {
        width: 500px;
        height: 300px;
        margin: auto;
    }
</style>

<body>
    <div id="container"></div>
    <div id="panel"></div>
    <div id="main">
        <input type="text" placeholder="请输入你所在的位置" id="originate">
        <input type="text" placeholder="请输入你要到的目的地" id="terminal">
        <button id="search">确定搜索</button>
    </div>
</body>
<script type="text/javascript">
    var map = new AMap.Map('container', {
        zoom: 13,   //级别
        // center: [116.397428, 39.90923],  //中心点坐标
        // center: [114.87,40.82],  //张家口
        center: [113.62, 34.75],
        // viewMode: '3D', //使用3D视图
        resizeEnable: true  //是否监控地图容器尺寸变化
    });
    var driving = new AMap.Driving({
        map: map,
        panel: 'panel'
    })
    $('#search').click(function () {
        var originate = $('#originate').val()
        var terminal = $('#terminal').val()
        driving.search([
            { keyword: originate, city: '全国' },
            { keyword: terminal, city: '全国' }
        ], function (status, result) {
            if (status === 'complete') {
                log.success('绘制驾车路线完成')
            } else {
                log.error('获取驾车数据失败：' + result)
            }

        })
    })



    // 标记点
    // var marker = new AMap.Marker({
    //     position: map.getCenter(),
    //     icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
    //     anchor: 'bottom-center',
    //     offset: new AMap.Pixel(0, 0)
    // });

    // marker.setMap(map);

    // // 设置鼠标划过点标记显示的文字提示
    // marker.setTitle('我是marker的title');

    // // 设置label标签
    // // label默认蓝框白底左上角显示，样式className为：amap-marker-label
    // marker.setLabel({
    //     direction: 'right',
    //     offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
    //     // content: "<div class='info'>我是 marker 的 label 标签</div>", //设置文本标注内容
    // });

</script>

</html>